<template>
  <div>
    <div class="goodfood">
      <div class="menuwrap" ref="menuWrap">
        <ul>
          <li v-for="(item,index) in goods" class="menu-item" :class="{'current':currentIndex === index}"  @click="selectMenu(index,$event)" >
        <span class="g-text">
          <icon :size="24" :icontype="item.type" v-show="item.type>0" class="icon"></icon>
          {{item.name}}
        </span>
          </li>
        </ul>
      </div>
      <div class="foodwrap" ref="foodWrap">
        <ul>
          <li v-for="item in goods" class="foodlist foodlist-hook">
            <h1 class="f-title">{{item.name}}</h1>
            <ul>
              <li v-for="food in item.foods" class="foods-item">
                <div class="f-icon" @click="selectFood(food,$event)">
                  <img :src="food.icon" alt="">
                </div>
                <div class="f-content">
                  <h2 class="f-name">{{food.name}}</h2>
                  <span class="desction">{{food.description}}</span>
                  <div class="extra">
                    <span>月售{{food.sellCount}}份</span>
                    <span>好评率{{food.rating}}%</span>
                  </div>
                  <div class="price">
                    <span class="newprice">￥{{food.price}}</span>
                    <span v-show="food.oldPrice" class="oldprice">￥{{food.oldPrice}}</span>
                  </div>
                  <div class="cartwrap">
                    <cartcontrol :food="food" @parentAdd="parentAddFn"></cartcontrol>
                  </div>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
   <shopcar :delivery-price="seller.deliveryPrice" :min-price="seller.minPrice" :select-foods="selectFoods" ref="shopDrop"></shopcar>
    <fooddetail :food="selectedFood" ref="food"></fooddetail>
  </div>
</template>

<script type="text/ecmascript-6">
  import icon from '../../components/icon/icon.vue'
  import shopcar from '../../components/shopcar/shopcar.vue'
  import cartcontrol from '../../components/cartcontrol/cartcontrol.vue'
  import fooddetail from '../../components/foodDetail/foodDetail.vue'
  import BScroll from 'better-scroll'
  const ERR_OK = 0;
  export default{
    props: {
      seller: {
        type: Object
      }
    },
    data (){
      return {
        goods: [],
        listHeight:[],
        scrollY:0,
        selectedFood:{}
      }
    },
    computed:{
      currentIndex (){
        for(let i=0;i<this.listHeight.length;i++){
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i+1];
          if(!height2 || (this.scrollY>=height1 && this.scrollY<height2)){
            return i;
          }
        }
        return 0;
      },
      selectFoods(){
        let foods=[];
        this.goods.forEach((goods) => {
          goods.foods.forEach((food) => {
            if(food.count) {
              foods.push(food);
            }
          })
        })
        return foods;
      }
  },
    created() {
      this.classMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special'];
      this.$http.get('/api/goods').then((res)=> {
        res = res.body;
        if (res.errno === ERR_OK) {
          this.goods = res.data;
          this.$nextTick(() => {
            this._initScroll();
            this._calculateHeight();
          });
        }
      }, (req)=> {

      })
    },
    /*
    * 1.vue ref="Name" 获取原生dom对象  通过  this.$refs.Name 可以访问到对象
    * 2.$nextTick 这个接口  是想计算跟dom相关的计算   保证dom已经在渲染了。数据的自然映射，但是在dom数据发生改变的时候是在nextTick之后，所以需要在这个接口的后面的回调函数里面去计算。
    *
    */
    methods: {
      selectMenu(index,event){
        //阻止pc端的自发的点击事件
        if(!event._constructed){
          return;
        }
        console.log(index);
        let foodList=this.$refs.foodWrap.getElementsByClassName('foodlist-hook');
        let el=foodList[index];
        console.log(el);
        //scrollToElement   这个是滚动的方法
        this.foodScroll.scrollToElement(el,300);
      },
      _drop(target){
        this.$refs.shopDrop.drop(target);
      },
      _initScroll() {
        this.menuScroll= new BScroll(this.$refs.menuWrap,{
          click:true
        });
        this.foodScroll= new BScroll(this.$refs.foodWrap,{
          click:true,
          probeType: 3
        });
        this.foodScroll.on('scroll',(pos) => {
          this.scrollY = Math.abs(Math.round((pos.y)));
        })
      },
      //计算每一个li的高度  ，传入到一个数组，是一个递增的
      _calculateHeight() {
        let foodLists=this.$refs.foodWrap.getElementsByClassName('foodlist-hook');
        let height=0;
        this.listHeight.push(height);
        for(var i=0;i<foodLists.length;i++){
          let item=foodLists[i];
          height+=item.clientHeight;
          this.listHeight.push(height);
        }
      },
      parentAddFn (target){
       this._drop(target);
      },
      selectFood(food,event){
        if(!event._constructed){
          return;
        }
        this.selectedFood = food;
        this.$refs.food.show();
      }
    },
    components: {
      icon,
      shopcar,
      cartcontrol,
      fooddetail
    }
  }
</script>

<style>
  .goodfood{display: flex;position: absolute;width: 100%;top: 174px;bottom: 46px;overflow: hidden;clear: both;/*background-color: #000;*/}
  .goodfood .menuwrap{flex: 0 0 80px;width: 80px;background-color: #f3f5f7;}
  .menuwrap .menu-item{height: 53px;padding: 0 12px;display: table;width: 56px;border-bottom: 1px solid rgba(7, 17, 27, 0.1);}
  .menuwrap .menu-item.current{background-color: #fff;font-weight: 700;}
  .menuwrap .menu-item.current .g-text{border:none;color: rgb(240, 20, 20);}
  .menuwrap .g-text{color: #000;font-weight: 200;line-height: 14px;display: table-cell;font-size: 12px;vertical-align: middle;}
  .goods .foodwrap{flex: 1;background-color: #fff;}
  .foodwrap .f-title{padding-left:14px;height: 26px;line-height:26px;color:rgb(147,153,159);font-size: 12px;background-color:#f3f5f7;border-left:2px solid #d9dde1;}
  .foodwrap .foods-item{margin:18px;padding-bottom:18px;border-bottom:1px solid #d9dde1;clear: both;overflow: hidden;}
  .foodwrap .foods-item:last-child{border:none;}
  .foodwrap .foods-item .f-icon{width: 100px;height: 100px;float: left;overflow: hidden;}
  .foodwrap .foods-item .f-icon img{width: 100%;height: 100%;display: block;}
  .foodwrap .foods-item .f-content{margin-left:100px;position: relative;}
  .foodwrap .foods-item .f-content .f-name{height: 20px;line-height:20px;font-size: 14px;color:rgb(7,17,27);margin-left: 10px;}
  .foodwrap .foods-item .f-content .desction{display: inline-block;margin:3px 0;margin-left:10px;font-size: 10px;color:rgb(147,153,159);}
  .foodwrap .foods-item .f-content .extra{font-size: 10px;color:rgb(147,153,159);margin:5px 0;margin-left:10px;}
  .foodwrap .foods-item .f-content .price{height:14px;margin-left: 10px;margin-top: 10px;}
  .foodwrap .foods-item .f-content .cartwrap{display: inline-block;width: 60px;height: 25px;position: absolute;bottom:-7px;right:15px;}
  .foodwrap .foods-item .f-content .price .newprice{font-size: 14px;font-weight:bold;color: red;}
  .foodwrap .foods-item .f-content .price .oldprice{font-size: 10px;color:rgb(147,153,159);text-decoration:line-through;}
  @media only screen and (max-width: 321px){.foodwrap .foods-item .f-icon{width: 80px;height: 80px;}
    .foodwrap .foods-item .f-content{margin-left: 80px;}
    .foodwrap .foods-item .f-content .cartwrap{width: 45px;height: 25px;}}
</style>
